<template>
  <div id="components-layout-demo-basic">

    <a-layout :style="{height:heightTable,overflow:'scroll',backgroundColor:'white'}">
      <!--      页眉部分-->
      <a-layout-header>
        <div class="head_group">
          <a-button @click="back">返回</a-button>
          <a-button style="float:right;" @click="save('education')" :disabled="isDisabled">保存</a-button>
        </div>
        <hr color="#00a0e9"/>
      </a-layout-header>
      <a-layout-content>
        <a-form-model ref="education" :model="educational" :rules="rules">

          <a-row style="margin-bottom: 20px;">
            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="毕业学校"
                prop="school"
              >
                <a-input v-model="educational.school" type="text" size="large" placeholder="请输入毕业学校"  :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="专业"
                prop="professional"
              >
                <a-input v-model="educational.professional" type="text" size="large" placeholder="请输入专业" :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="证明人"
                prop="certifier"
              >
                <a-input v-model="educational.certifier" type="text" size="large" placeholder="请输入证明人"  :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>
          </a-row>

<!--     ---------------------------------------------     -->
          <a-row style="margin-bottom: 20px;">
            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="开始时间"
                prop="startDate"
              >
                <a-date-picker v-model="educational.startDate" size="large" placeholder="开始时间" style="width: 100%;" :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="结束时间"
                prop="endDate"
              >
                <a-date-picker v-model="educational.endDate" size="large" placeholder="结束时间" style="width: 100%;" :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="证明人电话"
                prop="certifierPhone"
              >
                <a-input v-model="educational.certifierPhone" type="text" size="large" placeholder="请输入证明人电话"  :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>
          </a-row>


          <!--     ---------------------------------------------     -->
          <a-row style="margin-bottom: 20px;">
            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="学习形式"
                prop="learningForm"
              >
                <j-dict-select-tag :triggerChange="true" v-model="educational.learningForm" @change="learningFormChange" dictCode="learning_form"  :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="学习结果"
                prop="learningOutcome"
              >
                <j-dict-select-tag  placeholder="请选择类型" :triggerChange="true" v-model="educational.learningOutcome" @change="learningOutcomeChange" dictCode="learning_outcome" :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="学历证书编号"
              >
                <a-input v-model="educational.educationNo" type="text" size="large" placeholder="学历证书编号"  :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>
          </a-row>


          <!--     ---------------------------------------------     -->
          <a-row style="margin-bottom: 20px;">
            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="学历"
                prop="education"
              >

                <a-select  v-model="educational.education" size="large" style="font-size: 14px;" placeholder="Tags Mode"  :disabled="isDisabled">
                  <a-select-option v-for="(edu,i) in educationList" :value="edu.educationId" :key="edu.educationId">
                    {{edu.educationName}}
                  </a-select-option>
                </a-select>

              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="学位"
                prop="degree"
              >
                <j-dict-select-tag :triggerChange="true" v-model="educational.degree" @change="degreeChange" dictCode="degree" :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="学位证书编号"
              >
                <a-input v-model="educational.degreeNo" type="text" size="large" placeholder="学位证书编号"  :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row style="margin-bottom: 20px;">
            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="是否是最高学历"
              >
                <a-checkbox v-model="educational.isMaxEducation" :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                label="是否是最高学位"
              >
                <a-checkbox v-model="educational.isMaxDegree" :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>


          </a-row>

          <a-row>
            <a-col :span="24">
              <a-form-model-item
                :label-col="formItemLayout.labelColTextarea"
                :wrapper-col="formItemLayout.wrapperColTextarea"
                label="项目备注"
              >
                <a-textarea v-model="educational.remarks" placeholder="项目备注不能超过200个字符" :rows="4" :maxLength="200"  :disabled="isDisabled"/>
              </a-form-model-item>
            </a-col>
          </a-row>

        </a-form-model>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>

    import {getAction,postAction,putAction,deleteAction} from '@/api/manage'
    import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
    //布局占据的位数
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 },
        labelColTextarea: { span: 2 },
        wrapperColTextarea: { span: 21 },
    };

    //已占领的高度
    let occupyHeight = 230;

    export default {
        name: "education",
        components:{JDictSelectTag},
        data(){
            return{
                //报错成功或返回跳转的panekey
                paneKey:1,
                //控件是否能编辑
                isDisabled:true,
                //项目数据
                educational: {
                    id:null,
                    basicId:null,

                    school:null,
                    professional:null,
                    certifier:null,
                    startDate:null,
                    endDate:null,
                    certifierPhone:null,
                    learningForm:null,
                    learningOutcome:null,
                    educationNo:null,
                    education:null,
                    degree:null,
                    degreeNo:null,
                    isMaxEducation:null,
                    isMaxDegree:null,
                    remarks:null
                },
                educationList:[],
                //控件占一半位置
                widthLayout:{
                    width:'60%',
                },
                heightTable:0,
                //布局占据的位数
                formItemLayout,
                // 校验规则
                rules: {
                    school: [
                        { required: true, message: '毕业学校不能为空', trigger: 'blur' },
                    ],
                    professional: [
                        { required: true, message: '专业不能为空', trigger: 'blur' },
                    ],
                    certifier: [
                        { required: true, message: '证明人不能为空', trigger: 'blur' },
                    ],
                    startDate: [
                        { required: true, message: '开始时间不能为空', trigger: 'change' },
                    ],
                    endDate: [
                        { required: true, message: '结束时间不能为空', trigger: 'change' },
                    ],
                    certifierPhone: [
                        { required: true, message: '证明人手机号不能为空', trigger: 'blur' },
                    ],

                    learningForm: [
                        { required: true, message: '学习形式不能为空', trigger: 'blur' },
                    ],
                    learningOutcome: [
                        { required: true, message: '学习结果不能为空', trigger: 'change' },
                    ],
                    education: [
                        { required: true, message: '学历不能为空', trigger: 'change' },
                    ],
                    degree: [
                        { required: true, message: '学位不能为空', trigger: 'blur' },
                    ],
                },
                //是否有基本信息
                isExists:false,
            }
        },
        methods: {
            //学业形式
            learningFormChange(val){
                this.educational.learningForm = val;
            },
            //学业结果
            learningOutcomeChange(val){
                this.educational.learningOutcome = val;
            },
            //学位
            degreeChange(val){
                this.educational.degree = val;
            },
            //读取学历
            initPolitics(){
                let that = this;
                getAction("/education/education/list").then(function(resp){
                    that.educationList = resp.result;
                }).catch(function(error){
                    console.log("读取名族 = ",error)
                });
            },
            //清空
            reset(){
                let that = this;
                that.educational.school=null
                that.educational.professional=null
                that.educational.certifier=null
                that.educational.startDate=null
                that.educational.endDate=null
                that.educational.certifierPhone=null
                that.educational.learningForm=null
                that.educational.learningOutcome=null
                that.educational.educationNo=null
                that.educational.education=null
                that.educational.degree=null
                that.educational.degreeNo=null
                that.educational.isMaxEducation=null
                that.educational.isMaxDegree=null
                that.educational.remarks=null
            },
            //返回
            back(){
                // this.$router.push("/internship/details/"+this.educational.basicId);
                this.reset();
                // alert("back basicId = "+this.educational.basicId);
                this.$emit('router-pane',this.paneKey,this.educational.basicId)
            },
            //获取父组件中isDisable
            isDisable(isDisabled){
                this.isDisabled = isDisabled;
            },
            //保存数据
            save(formName){
                if(!this.isExists){
                    this.$message.info('不存在基本信息，请先填完基本信息保存后再填写！');
                    return;
                }
                console.log("education = >",this.educational);
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        //保存   交给后端判断是保存还是更新，如果有id就是更新，没有就是保存
                        let that = this;
                        // that.educational.isMaxEducation = that.educational.isMaxEducation==true?1:0;
                        // that.educational.isMaxDegree = that.educational.isMaxDegree==true?1:0;
                        this.$confirm({
                            title: '保存',
                            content: h => '是否提交保存？',
                            onOk() {
                                postAction("/educational/education-message/save",that.educational).then(res=>{
                                    that.$message.success(
                                        '保存成功!',
                                        10,
                                    );
                                    // that.$router.push("/internship/details/"+that.educational.basicId);
                                    that.reset();
                                    that.$emit('router-pane',that.paneKey,that.educational.basicId)
                                })
                            },
                            onCancel() {
                                console.log('Cancel');
                            },
                        });

                    } else {
                        this.$message.info('信息填写不完整，请填写完成再提交！');
                        return false;
                    }
                });
            },
            //
            getinfo(){
                let that = this;
                getAction("/educational/education-message/info/"+this.educational.id).then(res=>{
                    that.educational = res.result;
                    console.log("educational = > ",that.educational)
                })
            },
            //编辑时，传递的id
            getId(basicId,id){
                //校验清除
                this.$refs.education.resetFields()
                if(basicId>0){
                    //已有基本信息，可以添加信息
                    this.isExists=true;
                    this.educational.basicId = basicId;
                }else{
                    //还没有基本信息 ，无法添加其他信息
                    this.isExists=false;
                }
                if(id>0){
                    this.educational.id = id;
                    this.getinfo();
                }else{
                    this.educational.id = null;
                }
            },
            //加载高度
            initLoadHeight(height){
                this.heightTable = height-(occupyHeight) +("px");
            },
        },
        created() {
            //读取学历
            this.initPolitics();
        }
    }
</script>

<style scoped>

  /*layout布局*/
  #components-layout-demo-basic {
    /*text-align: center;*/
  }
  #components-layout-demo-basic .ant-layout-header {
    background-color:transparent;
    height: 60px;
    line-height: 1.5;
    margin: 0px;
    padding: 0px;
  }
  #components-layout-demo-basic .ant-layout-footer {
    line-height: 1.5;
    /*position: fixed;*/
    /*left: 50%;*/
    /*bottom: 2%;*/
    /*transform: translateX(calc(-50% + 100px));*/
    text-align: center;
  }
  #components-layout-demo-basic .ant-layout-content {
    color: #fff;
    min-height: 120px;
    line-height: 120px;
  }
  #components-layout-demo-basic > .ant-layout {
    margin-bottom: 48px;
  }
  #components-layout-demo-basic > .ant-layout:last-child {
    margin: 0;
  }

</style>